<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /**
       * 定义一个函数，专门用来为指定元素绑定单击响应函数
       * 参数：
       *  idStr 要绑定单击响应函数的对象的id属性值
       *  fun 事件的回调函数，当单击元素时，该函数将会被触发
       */
      function myClick(idStr, fun) {
        var btn = document.getElementById(idStr);
        btn.onclick = fun;
      }

      window.onload = function () {
        // 为id为btn01的按钮绑定一个单机响应函数
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
          // 查找#bj结点
          var bj = document.getElementById("bj");
          // innerHTML 通过这个属性可以获取到元素内部的html代码
          alert(bj.innerHTML);
        };
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function () {
          // 查找所有li结点
          //   根据getElementsByClassName可以根据标签名获取一组元素结点对象
          // 这个方法会给我们返回一个类组对象，所有查询到的元素都会封装到对象中
          // 即使只查询到一个元素，也会封装到数组中返回
          var lis = document.getElementsByTagName("li");

          // 变量lis
          for (var i = 0; i < lis.length; i++) {
            alert(lis[i].innerHTML);
          }
        };

        var btn03 = document.getElementById("btn03");
        btn03.onclick = function () {
          // 查找name=gender的所有结点
          var inputs = document.getElementsByName("gender");
          //   alert(input.length);
          //   debugger;
          for (var i = 0; i < inputs.length; i++) {
            /**
             * innerHTML用于获取元素内部HTML代码
             * 对于自结束的标签，这个属性没有意义
             */
            // alert(inputs[i].innerHTML);

            /**
             * 如果需要读取元素结点属性，
             * 直接使用元素，属性名
             *    例子：元素.id 元素.name 元素.value
             *   读取class需要使用className
             */
            alert(inputs[i].type);
          }
        };
        var btn04 = document.getElementById("btn04");
        btn04.onclick = function () {
          var city = document.getElementById("city");
          // 查找#city下所有li结点
          var lis = city.getElementsByTagName("li");

          for (var i = 0; i < lis.length; i++) {
            alert(lis[i].innerHTML);
          }
        };

        var btn05 = document.getElementById("btn05");
        btn05.onclick = function () {
          var city = document.getElementById("city");
          // 返回#city下所有子结点
          /**
           * childNodes属性会获取文本结点在内的所有节点
           * 根据DOM标签间空白也会当成文本节点
           * 注意：在IE8及一下浏览器，不会吧空白文本当成子节点
           */
          var cns = city.childNodes;
          // alert(cns.length);
          // for (var i = 0; i < cns.length; i++) {
          //   alert(cns[i]);
          // }
          /**
           * children属性可以获取当前元素的所有子元素
           */
          var cns2 = city.children;
          alert(cns2);
        };
        var btn06 = document.getElementById("btn06");
        btn06.onclick = function () {
          var phone = document.getElementById("phone");
          // 返回#phone的第一个子节点
          // phone.childNodes[0];
          // firstChild可以获取到当前元素的第一个子节点，包括空白文本节点
          var fir = phone.firstChild;
          fir = phone.firstElementChild;
          alert(fir);
        };
        myClick("btn07", function () {
          var bj = document.getElementById("bj");

          // 返回#bj的父节点
          var pn = bj.parentNode;
          alert(pn);
          erHTML;
          /**
           * innerText
           * 该属性可以获取到元素内部的文本内容
           * 和innerHTML类似，不同的是它会自动将html去除
           */
          // alert(pn.innerText);
        });

        myClick("btn08", function () {
          var and = document.getElementById("android");
          // 返回#android的前一个兄弟节点
          var ps = and.previousSibling;
          // previousElementSibling获取前一个兄弟元素，IE8以下不支持
          // var pe = and.previousElementSibling;
          alert(ps);
        });

        myClick("btn09", function () {
          var um = document.getElementById("username");
          // 返回#username的value属性值
          alert(um.value);
        });
        myClick("btn10", function () {
          var um = document.getElementById("username");
          // 设置#username的value属性值
          um.value = "今天今天今天";
        });
        // 返回#bj的文本值
        myClick("btn11", function () {
          var bj = document.getElementById("bj");
          // alert(bj.innerHTML);
          // alert(bj.innerText);
          // 获取bj中的文本节点
          // var fc = bj.firstChild;
          // alert(fc.nodeValue);
          alert(bj.firstChild.nodeValue);
        });
      };
    </script>
  </head>
  <body>
    <div class="total">
      <div class="inner">
        <p>你喜欢哪个城市？</p>
        <ul id="city">
          <li id="bj">北京</li>
          <li>上海</li>
          <li>东京</li>
          <li>首尔</li>
        </ul>
        <br />
        <br />
        <p>你喜欢哪款游戏？</p>
        <ul id="game">
          <li id="rl">红警</li>
          <li>实况</li>
          <li>极品飞车</li>
          <li>魔兽</li>
        </ul>
        <br />
        <br />
        <p>你的手机操作系统时？</p>
        <ul id="phone">
          <li>IOS</li>
          <li id="android">Android</li>
          <li id="android">windows Phone</li>
        </ul>
      </div>
      <div class="inner">
        gender:
        <input type="radio" name="gender" value="male" />
        Male:
        <input type="radio" name="gender" value="female" />
        female
        <br />
        <br />
        name:
        <input type="text" name="name" id="username" value="abcde" />
      </div>
    </div>
    <div id="btnList">
      <div><button id="btn01">查找#bj结点</button></div>
      <div><button id="btn02">查找所有li结点</button></div>
      <div><button id="btn03">查找name=gender的所有结点</button></div>
      <div><button id="btn04">查找#city下所有li结点</button></div>
      <div><button id="btn05">返回#city下所有子结点</button></div>
      <div><button id="btn06">返回#phone的第一个子节点</button></div>
      <div><button id="btn07">返回#bj的父节点</button></div>
      <div><button id="btn08">返回#android</button></div>
      <div><button id="btn09">返回#username的value属性值</button></div>
      <div><button id="btn10">设置#username的value属性值</button></div>
      <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
  </body>
</html>
